<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
      layout:decorate="~{layout/default}">
<head>
    <title>我的认领</title>
</head>
<body>
    <div layout:fragment="content" class="fade-in">
        <div class="d-flex justify-content-between align-items-center mb-4">
            <h2><i class="fas fa-hand-holding-heart me-2"></i>我的认领</h2>
            <div>
                <a href="/" class="btn btn-primary">
                    <i class="fas fa-arrow-left me-2"></i>返回首页
                </a>
            </div>
        </div>
        
        <div th:if="${successMessage}" class="alert alert-success alert-dismissible fade show" role="alert">
            <i class="fas fa-check-circle me-2"></i>
            <span th:text="${successMessage}"></span>
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
        </div>
        
        <div class="card">
            <div class="card-header">
                <h5 class="mb-0">认领列表</h5>
            </div>
            <div class="card-body">
                <div th:if="${claims.isEmpty()}" class="text-center py-5">
                    <i class="fas fa-info-circle fa-3x text-muted mb-3"></i>
                    <p class="lead">您还没有认领过物品</p>
                    <a href="/items" class="btn btn-primary mt-3">
                        <i class="fas fa-search me-2"></i>浏览物品
                    </a>
                </div>
                
                <div th:unless="${claims.isEmpty()}" class="table-responsive">
                    <table class="table table-hover">
                        <thead>
                            <tr>
                                <th>ID</th>
                                <th>物品名称</th>
                                <th>认领说明</th>
                                <th>认领时间</th>
                                <th>状态</th>
                                <th>操作</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr th:each="claim : ${claims}">
                                <td th:text="${claim.id}">ID</td>
                                <td>
                                    <a th:href="@{/items/{id}(id=${claim.item.id})}" th:text="${claim.item.title}">物品名称</a>
                                </td>
                                <td th:text="${#strings.abbreviate(claim.description, 50)}">认领说明</td>
                                <td th:text="${#temporals.format(claim.claimTime, 'yyyy-MM-dd HH:mm')}">认领时间</td>
                                <td>
                                    <span class="badge" th:classappend="${
                                        claim.status.name() == 'PENDING' ? 'bg-warning' : 
                                        claim.status.name() == 'APPROVED' ? 'bg-success' : 
                                        'bg-danger'
                                    }" th:text="${claim.status.displayName}">状态</span>
                                </td>
                                <td>
                                    <a th:href="@{/claims/{id}(id=${claim.id})}" class="btn btn-sm btn-outline-primary">
                                        <i class="fas fa-eye"></i> 查看详情
                                    </a>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</body>
</html> 